<!-- 弹窗组件小龙开发所有 -->
<template>
  <popup class="popup" v-model:visible="isVisible" height="45%" transparency="25%">
    <template #content>
      <view class="title">{{ props.title }}</view>
      <view class="cont">
        <!-- 天 -->
        <scroll-view class="day" :scroll-y="true">
          <view
            :class="date_index === selectedDateIndex ? 'active_copy' : ''"
            v-for="(item, date_index) in props.content"
            :key="date_index"
            @tap="dataCallback(date_index, item)"
            >{{ item.ymdLabel ?? item.ymdFormat }}</view
          >
        </scroll-view>

        <!-- 时 -->
        <scroll-view class="content" :scroll-y="true" :scroll-top="scrollTop">
          <view
            class="appoint"
            :class="time_index === selectedTimeIndex ? 'longActive' : ''"
            v-for="(item, time_index) in Days"
            @tap="timeCallback(time_index, item)"
            :key="item.time"
            >{{ selectedDateIndex === 0 && time_index === 0 ? '尽快送达' : item.time
            }}<text :class="time_index === selectedTimeIndex ? 'cuIcon-check' : ''"></text
          ></view>
        </scroll-view>
      </view>
    </template>
  </popup>
</template>

<script setup lang="ts">
import { watch, ref, nextTick } from 'vue'
import Popup from '@/components/popup/index.vue'
import { type DateItem, type TimeItem } from './type'
import type { PredetermineDateAndTime } from './utils.type'
const props = defineProps({
  //弹窗组件标题
  title: {
    type: String,
    default: '请传入title'
  },
  //弹窗组件数据
  content: {
    type: Object as () => DateItem[]
  },

  //点击模态框是否能关闭弹窗
  showYes: {
    type: Boolean,
    default: false
  }
})
const emits = defineEmits<{
  (e: 'dataCallback', newVal: DateItem): void
  (e: 'timeCallback', appointmentTimeItem: PredetermineDateAndTime): void
  (e: 'close', newVal: boolean): void
}>()
const scrollTop = ref(0)
const selectedDateIndex = ref(0)
// 选中的时间time项索引
const selectedTimeIndex = ref<number | null>(0)
const Days = ref<TimeItem[]>([])
//控制弹窗的隐藏显示
const isVisible = ref(false)

watch(
  () => props.content,
  (newValue, oldValue) => {
    if (newValue == null || newValue.length < 1) return
    Days.value = newValue[0].times
    // 重置日期指向
    selectedDateIndex.value = selectedTimeIndex.value = 0
  },
  { immediate: true, deep: true }
)
// 关闭窗口
function showModal() {
  emits('close', false)
}
// 点击模态框关闭窗口
function Modal() {
  if (props.showYes) {
    emits('close', false)
  }
}
//配送时间切换回顶
function goTop() {
  scrollTop.value = 1
  nextTick(function () {
    scrollTop.value = 0
  })
}

//切换日期
function dataCallback(index: number, item: DateItem) {
  selectedDateIndex.value = index
  Days.value = props.content![index].times
  selectedTimeIndex.value = null
  goTop()
  emits('dataCallback', item)
}

//选择时间
function timeCallback(index: number, item: TimeItem) {
  selectedTimeIndex.value = index
  emits('timeCallback', { dateItem: props.content![selectedDateIndex.value], timeItem: item })
  // 选择时间后，隐藏组件
  isVisible.value = false
}
// 调起
function callOut() {
  isVisible.value = true
}

// 导出
defineExpose({
  callOut
})

// style var
const titleHeight = '100rpx'
</script>

<style scoped>
.mask {
  position: fixed;
  inset: 0;
  z-index: 999;
  background-color: #000;
  opacity: 0.5;
  animation: get-into 0.5s 1;
}

@keyframes get-into {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 0.5;
  }
}

.active {
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 1000;
  overflow: hidden;
  width: 100%;
  height: 400rpx;
  transition: 0.4s;
  border-top-left-radius: 16rpx;
  border-top-right-radius: 16rpx;
  transform: translateY(100%);
}

.add {
  transform: translateY(0);
}

.title {
  position: relative;
  height: v-bind(titleHeight);
  font-size: 35rpx;

  /* padding: 20rpx 0; */
  border-bottom: 2rpx solid #eee;
  box-sizing: border-box;
  text-align: center;
  background-color: #fff;
  line-height: v-bind(titleHeight);
}

.cont {
  position: absolute;
  inset: v-bind(titleHeight) 0 0;
  display: flex;
  overflow-y: scroll;
  background-color: #fff;
}

.day {
  border-right: 2rpx solid #f8f8f8;
  border-bottom: 20px solid #fff;
  text-align: center;
  background-color: #fff;
  flex: 2;
}

.day view {
  padding: 30rpx 12rpx;
  font-size: 28rpx;
  box-sizing: border-box;
}

.content {
  flex: 4;
  font-size: 28rpx;
  border-bottom: 40rpx solid #fff;
  background-color: #fff;
}

.appoint {
  padding: 30rpx;
  border-bottom: 2rpx solid #f8f8f8;
  text-align: left;
}

.appoint text {
  margin-left: 30rpx;
}

.active_copy {
  position: relative;
  color: #27c866;
  background-color: #d7f7e3;
  box-sizing: border-box;
}

.active_copy::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 5rpx;
  height: 94rpx;
  background: #27c866;
  content: '';
}

.longActive {
  position: relative;
  color: #27c866;
}

.cuIcon-check {
  position: absolute;
  left: 210rpx;
  width: 30rpx;
  height: 16rpx;
  border-bottom: 4rpx solid #27c866;
  border-left: 4rpx solid #27c866;
  transform: rotate(-45deg);
}

scroll-view ::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
  color: transparent;
}
</style>
@/components/appointment-time/type
